{% extends 'demo_bootstrap/base.html' %}
{% load bootstrap3 %}

{% block title %}django-bootstrap3{% endblock %}

{% block content %}
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
            content or information.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
    <div class="container">
        <div class="progress">
            <div class="progress-bar progress-bar-success  progress-bar-striped active" role="progressbar"
                 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                60%
            </div>
        </div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#modal" role="tab" data-toggle="tab">模式框</a></li>
            <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="modal">
                <div class="container">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        Launch demo modal
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span
                                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="profile">
                <a id="tooltip" href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
                <div class="tooltip">
                  <div class="tooltip-inner">
                    Tooltip!
                  </div>
                  <div class="tooltip-arrow"></div>
                </div>


            </div>
            <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
            <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
        </div>



    </div>
    <script>
        $(function(){
            $('#tooltip').tooltip('show');
        })
    </script>
{% endblock %}

